<script>
import MapMarker from "@/components/MapMarker";
import { add, update } from "@/api/device";
export default {
    components: {MapMarker},
  props: {
    show: {
      type: Boolean,
      defalut: false,
    },
    item: {
      type: Object,
      default: () => {},
    },
    group: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    show: {
      handler(nv) {
        if (nv) {
          this.form = this.item || {};
          if (!this.item.id) {
            this.$set(this.form, "groupId", this.group.groupId);
            this.$set(this.form, "groupName", this.group.groupName);
            this.$set(this.form, "groupPath", this.group.groupPath);
          }
          this.$nextTick((_) => {
            this.$refs["MapMarker"].initMap((_) => {
              if (this.form.location) {
                this.$refs["MapMarker"].addMarker(this.form.location);
              }
            });
          });
        } else {
          this.$refs["MapMarker"] && this.$refs["MapMarker"].clearMarker();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {},
      rules: {
        name: { required: true, message: "请输入监控名称", trigger: "blur" },
      },
    };
  },
  methods: {
    close() {
      this.$emit("update:show", false);
    },
    submit() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          const res = this.form.id
            ? await update(this.form)
            : await add(this.form);
          if (res.code == 1) {
            this.$emit("confirm");
            this.close();
          }
        }
      });
    },
    onChangeType(e) {
      const item = this.deviceType.find((item) => item.value == e);
      this.$set(this.form, "typeName", item.label);
    },
    onChangeMap(location) {
      this.$set(this.form, "location", location);
    },
  },
};
</script>

<template>
  <el-dialog title="新增/编辑" :visible="show" :before-close="close" top="15vh">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="设备名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="设备编号">
        <el-input v-model="form.code" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="设备类型">
        <el-select v-model="form.type" placeholder="请选择" @change="onChangeType">
          <el-option v-for="(item,index) in deviceType" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="经纬度" prop="location">
        <el-input v-model="form.location" disabled placeholder="请选择"></el-input>
        <MapMarker ref="MapMarker" :isClick="true" @change="onChangeMap" style="margin-top:10px;"></MapMarker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<style scoped lang="scss">
</style>
